<template>
	<view @click="isAddClassPopup.open()">
		<slot></slot>
	</view>
	<myPopupVue ref="isAddClassPopup">
		<view class="addClassPopup">
			<view class="popup_title">
				添加标签:
			</view>
			<view class="addClassPopup_one">
				<view class="addClassPopup_title">
					类型:
				</view>
				<radio-group @change="radioChange" class="changeTheme_chooseBox" v-if="isShow">
					<label class="changeTheme_chooseBox_one" v-for="item in tagList" :key="item">
						<radio class="changeTheme_chooseBox_one_radio" :value="item.data" :checked="false"/>
						<view class="changeTheme_chooseBox_one_show"
							:class="item.data==theNewClass.newTag?'changeTheme_chooseBox_one_show_active':''">
							<image class="changeTheme_chooseBox_one_show_icon" src="/static/base/correct.png" mode="">
							</image>
						</view>
						<view class="changeTheme_chooseBox_one_text">{{item.title}}</view>
					</label>
				</radio-group>
			</view>
			<view class="addClassPopup_one">
				<view class="addClassPopup_title">
					名称:
				</view>
				<input v-model="theNewClass.newClass" class="addClassPopup_input" :maxlength="5" placeholder="新标签长度不超过5个字" />
			</view>
			<view class="addClassPopup_button" >
				<view class="addClassPopup_button_text" @click="addTheClass">
					确定
				</view>
			</view>
		</view>
	</myPopupVue>
</template>

<script setup>
	import myPopupVue from '@/components/base/myPopup.vue';
	import store from "@/store/index.js"
	import {
		ref,
		computed
	} from "vue"
	import {
		myShowToast
	} from '@/uitls/tool.js'
	const isAddClassPopup = ref()

	const tagList = computed(() => store.state.AddClass.addClassMain)
	const radioChange = (e) => {
		theNewClass.value.newTag = e.detail.value
	}
	const theNewClass = ref({
		newTag: null,
		newClass: ""
	})
	const addTheClass = () => {
		if (theNewClass.value.newTag == null || theNewClass.value.newClass == "") {
			myShowToast("请正确设置标签内容")
		} else {
			isShow.value = false
			setTimeout(() => isShow.value = true, 100)
			store.commit("AddClass/addAddClassOne", theNewClass.value)
			theNewClass.value = {
				newTag: null,
				newClass: ""
			}
			isAddClassPopup.value.close()
		}
	}
	const isShow = ref(true)
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.addClassPopup {
		padding: 1em;
		padding-top: 0;
		width: $bigPopupWidth;

		.addClassPopup_one {
			line-height: 2em;
			display: flex;
			align-items: center;

			.addClassPopup_title {
				color: $baseBlack_mid;
				margin-right: 1em;
			}

			.addClassPopup_input {
				font-size: $midFontsize;
				border-bottom: $baseBorder;
				padding: 0.1em;
			}
		}

		.changeTheme_chooseBox {
			display: flex;

			&_one {
				margin-right: 0.8em;
				line-height: 2em;
				display: flex;
				align-items: center;
				
				&_radio {
					display: none;
				}

				&_show {
					width: 1.2em;
					height: 1.2em;
					border: $baseColorBorder;
					border-radius: 100%;
					margin-right: 0.2em;
					position: relative;

					&_icon {
						width: $midFontsize;
						height: $midFontsize;
						position: absolute;
						top: 50%;
						left: 50%;
						opacity: 0;
						transform: translate(-50%, -50%);
						transition: $baseTransition;
					}
				}

				&_show_active {
					opacity: 1;
					background: $baseColor_mid;

					.changeTheme_chooseBox_one_show_icon {
						opacity: 1;
					}
				}

				&_text {
					font-size: $midFontsize;
				}
			}
		}

		.addClassPopup_button {
			margin-top: 1em;
			color: $baseBlack_mid;
			font-weight: bold;
			display: flex;
			justify-content: flex-end;
			&_text{
				width: max-content;
			}
		}
	}
</style>